import React, { Fragment } from 'react'
import './index.less'
import Tabs from '../components/Tabs'
import { Pagination } from 'antd'
import http from 'libs/http'
import { formatDate, getWeek } from 'libs/utils'
import { NoData } from 'components';
export default class AllComments extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    courseType: 0,
    teacherId: 0,
    pageIndex: 1,
    pageSize: 4,
    teacherList: [],
    total: 0,
    list: [],
  }

  componentDidMount() {
    this.getTeacherList()
    this.getCommentsByTeacherId()
  }

  // 获取当前类型的教师列表
  getTeacherList = () => {
    const { courseType } = this.state
    http.get('/student/comment/listTeachers', { courseType }).then(res => {
      this.setState({
        teacherList: [{ realName: '全部', active: true, teacherId: 0, }, ...res.data]
      })
    })
  }

  // 获取当前选中教师所对应的评语
  getCommentsByTeacherId = () => {
    const { teacherId, courseType, pageIndex, pageSize } = this.state
    http.get('/student/comment/listByPage', { teacherId, courseType, pageIndex, pageSize }).then(res => {
      console.log('/student/comment/listByPage', res)
      const { total, list=[] } = res.data
      this.setState({ total, list })
    })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      tabsData, courseType, teacherId: 0 // 每当切换后，教师选择都变为全部
    }, () => {
      this.getTeacherList()
      this.getCommentsByTeacherId()
    })
  }

  // 切换选中老师
  changeTeacherTab = index => () => {
    const { teacherList } = this.state
    let teacherId = 0
    teacherList.map((teacher, i) => {
      if(index === i) {
        teacher.active = true
        teacherId = teacher.teacherId
      }else{
        teacher.active = false
      }
    })
    this.setState({
      teacherList, teacherId
    }, this.getCommentsByTeacherId)
  }

    // 切换页码
    changePage = (page) => {
      this.setState({
        pageIndex: page
      }, this.getCommentsByTeacherId)
    }

  render() {
    const { tabsData, teacherList, total, list } = this.state
    return (
      <div className="all-comments">
        <Tabs tabsData={tabsData} changeTab={this.changeTab} />
        <div className="teacher-list">
          <b>教师选择</b>
          <ul>
            {
              teacherList.map((teacher, index) => (
                <li
                  key={index}
                  onClick={this.changeTeacherTab(index)}
                  className={teacher.active ? 'check' : ''}
                >
                  { teacher.teacherPicUrl && <img src={teacher.teacherPicUrl} /> }
                  <span>{teacher.realName}</span>
                </li>
              ))
            }
          </ul>
        </div>
        <div className="comments-list">
          {
            list.length ? <ul>
            {
              list.map((item, index) => {
                const {
                  classBeginTime, // 上课时间
                  commentDesc, // 评语
                  courseName, // 课程名称
                  realName, // 教师姓名
                  teacherPicUrl, // 教师头像
                  labels=[], // color 颜色 desc 描述
                } = item
                return (
                  <li key={index}>
                    <div className="img-wrap">
                      <img src={teacherPicUrl} />
                      <p>{realName}</p>
                    </div>
                    <div className="comments-detail">
                      <div className="course-name">
                        <b>{courseName}</b>
                        <span>{formatDate('YYYY-MM-DD', classBeginTime)} {getWeek(classBeginTime, '周')}</span>
                      </div>
                      <div className="labels">
                        {
                          labels.map((label, index) => (
                            <span key={index} style={{color: `${label.color}`}}>{label.desc}</span>
                          ))
                        }
                      </div>
                      <p>{commentDesc}</p>
                    </div>
                  </li>
                )
              })
            }
            </ul> : (
              <div className="empty-data">
                <i></i>
                <p>立即免费试听，与教师在线互动！</p>
                <a href="/#/student_center/free_classes/layout/free">免费试听</a>
              </div>
            )
          }
        </div>
        <div className="pagination-container">
          <Pagination
            size="small"
            pageSize={6}
            total={total}
            showQuickJumper
            hideOnSinglePage={true}
            onChange={this.changePage}
          />
        </div>
      </div>
    )
  }
}